// 导入useDispatch，useSelector
import { useDispatch } from 'react-redux';
// 导入action
import { getMenu, setUserInfo} from '../store/authSlice';
// 导入antd的按钮，多选，表单，文本框组件
import { Button, Checkbox, Form, Input } from 'antd';
// 导入登录接口方法
import {login} from '../api/user'
// 导入useNavigate
import { useNavigate } from 'react-router-dom';
import {
  UserOutlined,KeyOutlined
} from '@ant-design/icons';

// 当提交失败
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
  // 弹出antd提示
};

function LoginView() {
  // 定义dispatch
  const dispatch:any= useDispatch();
  //获取到跳转的钩子函数
  const navigate = useNavigate();
  // 当运行成功
  const onFinish = (values: any) => {
    // values 表单的值  name,password
    login(values)
    .then(res=>{
      if(res.data.code==200){
        // 存储token
        sessionStorage.setItem("token",res.data.token)
        // 存储用户信息
        dispatch(setUserInfo(res.data.user))
        // 存储用户信息(sessionStorage)
        sessionStorage.setItem("user",JSON.stringify(res.data.user))
        // 获取并存菜单信息          
        dispatch(getMenu())
        // 跳转到admin
        navigate("/admin");
       
      }
    })

  };
  return (<div className='loginView'>
   
    <div className='loginBox'>
      <h3><span style={{ color: "#36F" }}>快团团</span>登录</h3>
      <Form
        name="basic"
        labelCol={{ span: 0 }}
        wrapperCol={{ span: 24 }}
        style={{ maxWidth: 360 }}
        initialValues={{ remember: true ,name:"zeng8",password:"zmm123"}}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label=""
          name="name"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input    prefix={<UserOutlined />} placeholder="用户名"/>
        </Form.Item>

        <Form.Item
          label=""
          name="password"
         
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password   prefix={<KeyOutlined />} placeholder="密码"/>
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 0, span: 24 }}>
          <Checkbox>记住密码</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  </div>);
}

export default LoginView;